home *** CD-ROM | disk | FTP | other *** search
/ PC go! 2018 July / PCgo 07-2018 CD-ROM Germany.iso / nw.pak / Unnamed File 000109.txt < prev    next >
Encoding:
Text File  |  2015-07-29  |  3.7 KB  |  111 lines
  1. // Copyright 2014 The Chromium Authors. All rights reserved.
  2. // Use of this source code is governed by a BSD-style license that can be
  3. // found in the LICENSE file.
  4.  
  5. // Action links are elements that are used to perform an in-page navigation or
  6. // action (e.g. showing a dialog).
  7. //
  8. // They look like normal anchor (<a>) tags as their text color is blue. However,
  9. // they're subtly different as they're not initially underlined (giving users a
  10. // clue that underlined links navigate while action links don't).
  11. //
  12. // Action links look very similar to normal links when hovered (hand cursor,
  13. // underlined). This gives the user an idea that clicking this link will do
  14. // something similar to navigation but in the same page.
  15. //
  16. // They can be created in JavaScript like this:
  17. //
  18. //   var link = document.createElement('a', 'action-link');  // Note second arg.
  19. //
  20. // or with a constructor like this:
  21. //
  22. //   var link = new ActionLink();
  23. //
  24. // They can be used easily from HTML as well, like so:
  25. //
  26. //   <a is="action-link">Click me!</a>
  27. //
  28. // NOTE: <action-link> and document.createElement('action-link') don't work.
  29.  
  30. /**
  31.  * @constructor
  32.  * @extends {HTMLAnchorElement}
  33.  */
  34. var ActionLink = document.registerElement('action-link', {
  35.   prototype: {
  36.     __proto__: HTMLAnchorElement.prototype,
  37.  
  38.     /** @this {ActionLink} */
  39.     createdCallback: function() {
  40.       // Action links can start disabled (e.g. <a is="action-link" disabled>).
  41.       this.tabIndex = this.disabled ? -1 : 0;
  42.  
  43.       this.addEventListener('keydown', function(e) {
  44.         if (!this.disabled && e.keyIdentifier == 'Enter') {
  45.           // Schedule a click asynchronously because other 'keydown' handlers
  46.           // may still run later (e.g. document.addEventListener('keydown')).
  47.           // Specifically options dialogs break when this timeout isn't here.
  48.           // NOTE: this affects the "trusted" state of the ensuing click. I
  49.           // haven't found anything that breaks because of this (yet).
  50.           window.setTimeout(this.click.bind(this), 0);
  51.         }
  52.       });
  53.  
  54.       function preventDefault(e) {
  55.         e.preventDefault();
  56.       }
  57.  
  58.       function removePreventDefault() {
  59.         document.removeEventListener('selectstart', preventDefault);
  60.         document.removeEventListener('mouseup', removePreventDefault);
  61.       }
  62.  
  63.       this.addEventListener('mousedown', function() {
  64.         // This handlers strives to match the behavior of <a href="...">.
  65.  
  66.         // While the mouse is down, prevent text selection from dragging.
  67.         document.addEventListener('selectstart', preventDefault);
  68.         document.addEventListener('mouseup', removePreventDefault);
  69.  
  70.         // If focus started via mouse press, don't show an outline.
  71.         if (document.activeElement != this)
  72.           this.classList.add('no-outline');
  73.       });
  74.  
  75.       this.addEventListener('blur', function() {
  76.         this.classList.remove('no-outline');
  77.       });
  78.     },
  79.  
  80.     /** @type {boolean} */
  81.     set disabled(disabled) {
  82.       if (disabled)
  83.         HTMLAnchorElement.prototype.setAttribute.call(this, 'disabled', '');
  84.       else
  85.         HTMLAnchorElement.prototype.removeAttribute.call(this, 'disabled');
  86.       this.tabIndex = disabled ? -1 : 0;
  87.     },
  88.     get disabled() {
  89.       return this.hasAttribute('disabled');
  90.     },
  91.  
  92.     /** @override */
  93.     setAttribute: function(attr, val) {
  94.       if (attr.toLowerCase() == 'disabled')
  95.         this.disabled = true;
  96.       else
  97.         HTMLAnchorElement.prototype.setAttribute.apply(this, arguments);
  98.     },
  99.  
  100.     /** @override */
  101.     removeAttribute: function(attr) {
  102.       if (attr.toLowerCase() == 'disabled')
  103.         this.disabled = false;
  104.       else
  105.         HTMLAnchorElement.prototype.removeAttribute.apply(this, arguments);
  106.     },
  107.   },
  108.  
  109.   extends: 'a',
  110. });
  111.